<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		
/* 表单布局 */
form {
  display: grid;
  gap: 10px;
  max-width: 400px;
  margin: 0 auto;
}

/* 输入框和文本区域样式 */
input[type="text"],
input[type="password"],
textarea,
select,
input[type="date"],
input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 标签样式 */
label {
  display: inline-block;
  margin-bottom: 5px;
}

/* 提交按钮样式 */
button[type="submit"] {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #45a049;
}
	</style>
	<body>
		<div id="app">
			
		<form>
		  <label for="name">姓名：</label>
		  <input type="text" id="name" placeholder="请输入您的姓名" required>
		
		  <label for="password">密码：</label>
		  <input type="password" id="password" placeholder="请输入密码" required>
		
		  <label for="message">留言：</label>
		  <textarea id="message" placeholder="请输入留言" rows="4"></textarea>
		
		  <label>性别：</label>
		  <input type="radio" id="male" name="gender" value="male">
		  <label for="male">男</label>
		  <input type="radio" id="female" name="gender" value="female">
		  <label for="female">女</label>
		
		  <label>爱好：</label>
		  <input type="checkbox" id="hobby1" value="hobby1">
		  <label for="hobby1">音乐</label>
		  <input type="checkbox" id="hobby2" value="hobby2">
		  <label for="hobby2">运动</label>
		  <input type="checkbox" id="hobby3" value="hobby3">
		  <label for="hobby3">读书</label>
		
		  <label for="city">城市：</label>
		  <select id="city">
		    <option value="beijing">北京</option>
		    <option value="shanghai">上海</option>
		    <option value="guangzhou">广州</option>
		  </select>
		
		  <label for="date">选择日期：</label>
		  <input type="date" id="date">
		
		  <label for="myFile">选择文件：</label>
		  <input type="file" id="myFile">
		
		  <button type="submit">提交</button>
		</form>
			
		</div>
		<script src="js/form.js"></script>
		<script src="js/ajax.js"></script>
		<script>
			 const form = document.getElementById("myForm");
			 const formValues = getFormValues(form);
			const str=JSON.stringify(formValues);
			console.log(str)
			
			 form.addEventListener('change', (event) => {
			    const target = event.target;
			    if (target.nodeName === 'INPUT' || target.nodeName === 'SELECT' || target.nodeName === 'TEXTAREA') {
			      const name = target.name;
			      const type = target.type;
			      if (type === 'checkbox' || type === 'radio') {
			        const values = [...form.querySelectorAll(`input[name="${name}"]:checked`)].map(input => input.value);
			        console.log(name, values);
			      } else {
			        console.log(name, target.value);
			      }
			    }
			  });
			  
			  form.addEventListener('input', (event) => {
			     const target = event.target;
			     if (target.nodeName === 'INPUT' || target.nodeName === 'SELECT' || target.nodeName === 'TEXTAREA') {
			       const name = target.name;
			       const type = target.type;
			       if (type === 'checkbox' || type === 'radio') {
			         const values = [...form.querySelectorAll(`input[name="${name}"]:checked`)].map(input => input.value);
			         console.log(name, values);
			       } else {
			         console.log(name, target.value);
			       }
			     }
			   });
			   
			   ajax()
			     .sendRequest({
			       url: 'http://127.0.0.1:8081/getcontent?id=626',
			       method: 'GET',
			       headers: {
			         'Content-Type': 'application/json',
			         'Authorization': 'Bearer token123',
			       },
			     })
			     .then((response) => {
			       console.log('请求成功:', response);
			     })
			     .catch((status) => {
			       console.log('请求失败:', status);
			     })
			     .finally(() => {
			       console.log('请求完成');
			     });
		</script>
	</body>
</html>
